<template>
	<el-container>
		<div class="right-panel">
			<div class="right-panel-search" style="width: 100%; margin-top: 5px; margin-bottom: 5px">
				<div class="panel-search-box" style="width: 300px">
					<span class="demonstration" style="margin-left: 10px">时间范围:</span>
					<el-date-picker
						v-model="search.timeHorizon"
						type="daterange"
						range-separator="-"
						start-placeholder="起始时间"
						end-placeholder="截止时间"
						format="YYYY-MM-DD"
						value-format="YYYY-MM-DD"
						:size="size"
						style="margin-left: 10px; width: 250px !important"
					/>
				</div>
				<div class="panel-search-box" style="width: 300px">
					<span class="demonstration" style="margin-left: 10px">消息标题:</span>
					<el-input
						v-model="search.title"
						placeholder="请输入消息标题"
						style="margin-left: 10px; width: 250px"
						clearable
					></el-input>
				</div>
				<div class="panel-search-box" style="width: 300px">
					<span class="demonstration" style="margin-left: 10px">消息类型:</span>
					<el-select v-model="search.queryType" placeholder="全部" style="width: 250px; margin-left: 10px" clearable>
						<el-option label="全部" :value="'全部'"></el-option>
						<el-option label="滞销预警" :value="'滞销预警'"></el-option>
						<el-option label="断货预警" :value="'断货预警'"></el-option>
						<el-option label="坏货预警" :value="'坏货预警'"></el-option>
						<el-option label="库存预警" :value="'库存预警'"></el-option>
						<el-option label="批号预警" :value="'批号预警'"></el-option>
						<el-option label="销售预警" :value="'销售预警'"></el-option>
						<el-option label="风险预警" :value="'风险预警'"></el-option>
						<el-option label="智能跑店" :value="'智能跑店'"></el-option>
					</el-select>
				</div>
				<div class="panel-search-box">
					<el-button type="primary" style="margin-left: 10px" @click="upsearch">查询</el-button>
					<el-button type="" @click="cleanSearch">清空</el-button>
				</div>
			</div>
		</div>
		<el-header style="display: none"></el-header>
		<el-main class="nopadding">
			<scTable
				ref="table"
				:apiObj="apiObj"
				:params="params"
				stripe
				remoteSort
				remoteFilter
				border
				@selection-change="selectionChange"
			>
				<!-- <el-table-column type="selection" width="50"></el-table-column> -->

				<el-table-column label="标题" prop="title" align="left" min-width="200"></el-table-column>
				<!-- <el-table-column label="类型" prop="contentType" align="center" min-width="150"></el-table-column> -->
				<el-table-column label="数据类型" prop="dataType" align="center" min-width="150"></el-table-column>
				<el-table-column label="推送时间" prop="wtime" align="center" min-width="150"></el-table-column>
				<el-table-column label="消息类型" prop="wtype" align="center" min-width="150"></el-table-column>
				<el-table-column label="推送状态" prop="pushStatus" align="center" min-width="150">
					<template #default="scope">
						<el-tag v-if="scope.row.pushStatus == 0" type="success">推送成功</el-tag>
						<el-tag v-else-if="scope.row.pushStatus == 1" type="danger">推送失败</el-tag>
					</template>
				</el-table-column>
				<!-- <el-table-column label="失败原因" prop="failure" align="center" min-width="150">
					<el-button text @click="dialogVisible = true"> click to open the Dialog </el-button>

					<el-dialog v-model="dialogVisible" title="Tips" width="30%" :before-close="handleClose">
						<span>This is a message</span>
						<template #footer>
							<span class="dialog-footer">
								<el-button @click="dialogVisible = false">Cancel</el-button>
								<el-button type="primary" @click="dialogVisible = false"> Confirm </el-button>
							</span>
						</template>
					</el-dialog>
				</el-table-column> -->
				<el-table-column label="操作" fixed="right" align="center" width="150">
					<template #default="scope">
						<el-button-group>
							<el-button type="primary" size="small" @click="openLog(scope.row)">查看日志</el-button>
						</el-button-group>
					</template>
				</el-table-column>
			</scTable>
		</el-main>
		<log v-if="dialog.show" ref="log" @closed="dialog.show = false"></log>
	</el-container>
</template>

<script>
import log from './logs'

export default {
	name: 'msgList',
	components: {
		log
	},
	data() {
		return {
			dialog: {
				info: false,
				show: false
			},
			timeHorizon: [],
			search: {},
			apiObj: this.$API.msg.msgList,
			params: {}
		}
	},
	watch: {
		groupFilterText(val) {
			this.$refs.group.filter(val)
		}
	},

	mounted() {
		// var param= this.$route.query.pageSizeb
		// alert(param)
		// const params = new URLSearchParams(window.location.search)
		// const pageNum = params.get('pageNum')
		// alert(pageNum)
	},
	async created() {},
	methods: {
		//任务
		downTemp() {
			// 下载模板
		},
		//编辑
		table_edit(row) {
			this.dialog.edit = true
			this.$nextTick(() => {
				this.$refs.editDialog.open('edit').setData(row)
			})
		},
		//表格内开关
		async changeSwitch(val, row) {
			row.enable = row.enable === 1 ? 0 : 1
			row.$switch_status = true
			let data = {
				enable: val,
				staffNumber: row.staffNumber
			}
			var res = await this.$API.user.user.enable.post({ data: data })
			if (res && res.code === 0) {
				setTimeout(() => {
					delete row.$switch_status
					row.enable = val
					// console.log(typeof val, row)
					this.$message.success('操作成功')
				}, 500)
			}
		},

		//查看
		table_show(row) {
			this.dialog.info = true
			this.$nextTick(() => {
				this.$refs.infoDialog.setData(row)
			})
		},

		upsearch() {
			if (this.search.timeHorizon) {
				this.search.startTime = this.search.timeHorizon[0]
				this.search.endTime = this.search.timeHorizon[1]
			}
			this.$refs.table.upData(this.search)
		},
		cleanSearch() {
			this.search = {}
			this.$refs.table.reload(this.search)
		},
		//本地更新数据
		handleSuccess(data, mode) {
			if (mode === 'add') {
				data.id = new Date().getTime()
				this.$refs.table.tableData.unshift(data)
			} else if (mode === 'edit') {
				this.$refs.table.tableData
					.filter((item) => item.id === data.id)
					.forEach((item) => {
						Object.assign(item, data)
					})
			}
		},
		openLog(row) {
			this.dialog.show = true
			this.$nextTick(() => {
				this.$refs.log.open('show').setData(row.errorMsg)
			})
		}
	}
}
</script>

<style>
.header-btn-item {
	display: flex;
}
</style>
